<nz-modal #modal [(nzVisible)]="visible" [nzTitle]="title" [nzClosable]="false" [nzContent]="content" [nzFooter]="footer"
  [nzBodyStyle]="{'max-height':'600px', 'overflow-y': 'auto'}">
  <ng-template #footer>
    <button nz-button type="button" (click)="close()">关闭</button>
    <button nz-button type="button" (click)="reset()">重置</button>
    <button nz-button type="submit" [nzType]="'primary'" (click)="submit()">搜索</button>
  </ng-template>
  <ng-template #content>
    <ng-container *ngTemplateOutlet="groupTpl;context:{$implicit:group, parentGroup:null}"></ng-container>
    <ng-template #groupTpl let-group let-parentGroup="parentGroup">
      <div class="group-box" *ngIf="group" [ngStyle]="{'background-color': group.Level%2==0?'#eee':'#fff'}">
        <ng-container *ngFor="let subGroup of group.Groups">
          <ng-container *ngTemplateOutlet="groupTpl;context:{$implicit:subGroup, parentGroup:group}"></ng-container>
        </ng-container>
        <ng-container *ngFor="let rule of group.Rules">
          <ng-container *ngTemplateOutlet="ruleTpl;context:{$implicit:rule, group:group}"></ng-container>
        </ng-container>
        <div nz-row class="group-operate">
          <nz-select [(ngModel)]="group.Operate" nzSize="small">
            <nz-option *ngFor="let entry of groupOperateEntries" [nzValue]="entry.Operate" [nzLabel]="entry.Display"></nz-option>
          </nz-select>
          <button nz-button nzSize="small" (click)="addGroup(group)">增加分组</button>
          <button nz-button nzSize="small" (click)="addRule(group)">增加条件</button>
          <button nz-button nzSize="small" (click)="removeGroup(group,parentGroup)" *ngIf="group.Level>1">删除分组</button>
        </div>
      </div>
    </ng-template>
    <ng-template #ruleTpl let-rule let-group="group">
      <div nz-row>
        <div class="rule-box">
          <nz-select [(ngModel)]="rule.Field" nzSize="small" (ngModelChange)="fieldChange($event, rule)" nzPlaceHolder="选择属性" class="f-left" style="width: 100px;">
            <nz-option *ngFor="let column of columns" [nzValue]="column.index" [nzLabel]="column.title"></nz-option>
          </nz-select>
          <nz-select [(ngModel)]="rule.Operate" nzSize="small" class="f-left" style="width: 105px;">
            <nz-option *ngFor="let entry of rule.entries" [nzValue]="entry.Operate" [nzLabel]="entry.Display"></nz-option>
          </nz-select>
          <div class="f-left">
            <ng-container [ngSwitch]="rule.control">
              <ng-container *ngSwitchCase="'enum'">
                <nz-select [(ngModel)]="rule.Value" nzSize="small" style="width: 120px;">
                  <nz-option *ngFor="let enum of rule.enums" [nzValue]="enum.value" [nzLabel]="enum.label"></nz-option>
                </nz-select>
              </ng-container>
              <ng-container *ngSwitchCase="'number'">
                <nz-input-number [(ngModel)]="rule.Value" nzSize="small"></nz-input-number>
              </ng-container>
              <ng-container *ngSwitchCase="'date'">
                <div style="width:200px;">
                  <nz-date-picker nzShowTime [(ngModel)]="rule.Value" nzFormat="YYYY/MM/DD HH:mm" nzPlaceHolder="选择时间" nzSize="small"></nz-date-picker>
                </div>
              </ng-container>
              <ng-container *ngSwitchCase="'boolean'">
                <nz-switch [(ngModel)]="rule.Value"></nz-switch>
              </ng-container>
              <ng-container *ngSwitchDefault>
                <input nz-input [(ngModel)]="rule.Value" nzSize="small" />
              </ng-container>
            </ng-container>
          </div>
          <button nz-button (click)="removeRule(rule, group)" nzType="default" nzSize="small" nzShape="circle" class="f-left" nz-tooltip="删除条件">
            <i nz-icon nzType="close" nzTheme="outline"></i>
          </button>
        </div>
      </div>
    </ng-template>
  </ng-template>
</nz-modal>
